<!-- directive:title NG中的factory/service/provider区别 -->
<!-- directive:breadcrumb NG中的factory/service/provider区别 -->
<div class='panel-body'>
    <article class="docs-content">
        <p>这三种都是提供服务的方式， 他们到底有什么区别呢？</p>
        <p></p>
        <h3>factory</h3>
        <p>factory 可以认为是设计模式中的工厂方法， 就是你提供一个方法， 该方法返回一个对象的实例， 对于 AngularJS 的 factory 来说， 就是先定义一个对象， 给这个对象添加属性和方法， 然后返回这个对象</p>
        <script type="text/xianjs" ui-bs>
            app.factory('MyFactory', function() {
                var result = {};
                result.greeting = 'Hello from factory.';
                return result;
            });
        </script>
        <p>最后 controller 拿到的就是 result 对象 <code>var factoryResult = MyFactory();</code></p>
        <p></p>
        <h3>service</h3>
        <p>service 通过 new 运算符进行实例化， 可以认为是一个类型， 只要把属性和方法添加到 this 对象上即可， 不用显式返回什么对象</p>
        <script type="text/xianjs" ui-bs>
            app.service('MyService', function() {
                this.greeting = 'Hello from service';
            });
        </script>
        <p>controller 拿到的对象就是上面代码中 this 指向的对象 <code>var serviceObj = new MyService();</code></p>
        <p></p>
        <h3>provider</h3>
        <p>与 factory 和 service 稍有不同的是， provider 必须提供一个 $get 方法， $get 方法和 factory 要求是一致的， 即： 先定义一个对象， 给这个对象添加属性和方法， 然后返回这个对象</p>
        <script type="text/xianjs" ui-bs>
            app.provider('MyProvider', function() {
                this.$get = function() {
                    var result = {};
                    result.greeting = 'Hello from provider';
                    return result;
                }
            })
        </script>
        <p>最后 controller 拿到的对象就是 provider 的 $get 方法返回的对象 <code>var provider = (new MyProvider()).$get();</code></p>
        <p></p>
        <hr />
        <p>factory、 service 与 provider 使用起来是一样的， 都是通过 AngularJS 的依赖注入使用</p>
        <script type="text/xianjs" ui-bs>
            app.controller('TestController', ['$scope', 'MyFactory', 'MyService', 'MyProvider',
                function($scope, myFactory, myService, myProvider) {
                $scope.greetingFromFactory = myFactory.greeting;
                $scope.greetingFromService = myService.greeting;
                $scope.greetingFromProvider = myProvider.greeting;
            }]);
        </script>
        <script type="text/xianjs" ui-bs>
            <x ng-controller="TestController">
                <p>greeting from factory: {{greetingFromFactory}} </p>
                <p>greeting from service: {{greetingFromService}} </p>
                <p>greeting from provider: {{greetingFromProvider}} </p>
            </x>
        </script>
        <p></p>
        <p>provider 的特殊之处就是可以在 module 启动时进行配置， 从而达到特殊的用途， 比如在上面的 provider 中可以添加一个 setName 方法， 可以在启动时调用这个方法， 进行一些额外的初始化工作</p>
        <p></p>
        <script type="text/xianjs" ui-bs>
            app.provider('MyProvider', function() {
                var defaultName = 'anonymous';
                var name = defaultName;
                this.setName = function(newName) {
                    name = newName;
                }
                this.$get = function() {
                    var result = {};
                    result.greeting = 'Hello from provider';
                    result.name = name;
                    result.defaultName = defaultName;
                    return result;
                }
            })
            app.config(function(MyProviderProvider) {
                MyProviderProvider.setName('Angularjs Provider');
            });
        </script>
    </article>
</div>
